import { delDict, getDictList } from "@/api/modules/system/dict";
import { ColumnProps } from "@/components/ProTable/interface";
import OnlineStatus from "@/components/Sansan/OnlineStatus/OnlineStatus";
import { showTips, confirm } from "@/utils/util";
import { defineComponent } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ElMessage } from "element-plus";
import DataDialog from "./components/dataDialog";
export default defineComponent({
	props: {
		dictType: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: [],
	setup(props) {
		// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
		const proTableRef = ref();

		const initParam = reactive({ dictName: "" });
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			if (!props.dictType.dictType) {
				return { result: { records: [] } };
			}
			return getDictList({ ...params, dictType: props.dictType.dictType });
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = [
				{
					menuName: "添加",
					path: "add",
					btnClass: "primary"
				},
				{
					menuName: "删除",
					path: "del"
				}
			];
		});
		const currentItem = ref();
		const clickBtn = async (val: string, scope: any) => {
			switch (val) {
				case "add":
					detailDialog.visible = true;
					detailDialog.title = "新增字典标签";
					currentItem.value = { status: 1, dictType: props.dictType.dictType, dictTypeName: props.dictType.dictName };
					break;
				case "del":
					if (scope.selectList.length == 0) return ElMessage.error("至少选择一条数据操作");
					confirm({ content: "是否删除当前选择的记录？" }).then(async flag => {
						if (!flag) {
							return;
						}
						let { code } = await delDict({ ids: scope.selectList.map((item: any) => item.dictCode) });
						let ok = showTips(code, "删除字典类型");
						if (ok) {
							proTableRef.value.reset();
						}
					});
					break;
				case "mod":
					detailDialog.visible = true;
					detailDialog.title = "编辑字典标签";
					currentItem.value = { ...scope, dictTypeName: props.dictType.dictName };
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "dictLabel", label: "数据名称" },
			{ prop: "dictValue", label: "数据值" },
			{ prop: "dictValue", label: "字段标识" },
			{ prop: "status", label: "状态", width: 100 },
			{ prop: "remark", label: "备注" },
			{ prop: "operation", label: "操作", fixed: "right", width: 130 }
		];

		const detailDialog = reactive({ visible: false, title: "新增字典标签" });
		const state = reactive({
			searchParam: {} as any
		});
		watch(
			() => props.dictType.dictType,
			() => {
				proTableRef.value.reset();
			}
		);
		return () => {
			return (
				<div>
					<DataDialog
						v-model:visible={detailDialog.visible}
						title={detailDialog.title}
						detail={currentItem.value}
						onSubmit={() => {
							detailDialog.visible = false;
							proTableRef.value.reset();
						}}
					></DataDialog>
					<div class="mr-2">
						<ProTable
							ref={proTableRef}
							title={btnList.value.length ? "" : "字典数据"}
							columns={columns}
							requestApi={getTableList}
							dataCallback={dataCallback}
							initParam={state.searchParam}
							selectId="dictCode"
							toolButton={false}
							custSearch
						>
							{{
								headerRightExt: () => {
									return (
										<div class="flex" style="height: 32px;">
											<el-input v-model={initParam.dictName} style="width:250px" placeholder="搜索" />
											<el-button onClick={() => proTableRef.value.getTableList()}>查询</el-button>
										</div>
									);
								},
								tableHeader: (scope: any) => {
									return btnList.value?.map((item: any) => {
										return (
											<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
												<i class={`iconfont ${item.icon}`}></i>
												{item.menuName}
											</el-button>
										);
									});
								},
								dictName: (scope: any) => {
									return (
										<el-link type="primary" onClick={() => clickBtn("mod", scope.row)}>
											{scope.row.dictName}
										</el-link>
									);
								},
								status: (scope: any) => {
									return <OnlineStatus v-model={scope.row.status} onlineLabel="正常" offlineLabel="停用" />;
								},
								operation: (scope: any) => {
									return (
										<>
											<el-link type="primary" link class="iconfont iconbx-file" onClick={() => clickBtn("mod", scope.row)}>
												详情
											</el-link>
										</>
									);
								}
							}}
						</ProTable>
					</div>
				</div>
			);
		};
	}
});
